Adwaita: list-row style
authorLapo Calamandrei <calamandrei@gmail.com>
Mon, 14 Jul 2014 16:29:08 +0000 (18:29 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Mon, 14 Jul 2014 16:29:08 +0000 (18:29 +0200)
gtk/resources/theme/Adwaita/_common.scss
gtk/resources/theme/Adwaita/gtk-contained-dark.css
gtk/resources/theme/Adwaita/gtk-contained.css

index f62011391987cc6049b1ad25684173a8f3ce5d85..bceb842ec6ea57d8219216d23e2bd1f7af632e91 100644 (file)
@@ -1918,26 +1918,49 @@ GtkScrolledWindow {
   }
 }
 
-.list-row.button,
 .list-row,
 .grid-child {
-  background-image: none;
-  border-style: none;
-  box-shadow: none;
-  border-width: 0;
   padding: 2px;
 }
 
-.list-row.button:hover {
-  background-color: darken($base_color, 10%);
+.list-row.button {
+  @extend %undecorated_button;
+  background-color: transparentize($base_color,1); // for the transition
+  border-style: none; // I need no borders here
+  border-radius: 0;   // and no rounded corners
+  box-shadow: none;   // and no box-shadow
+  &:hover {
+    background-color: mix($fg_color, $base_color, 5%);
+  }
+  &:active {
+    color: $selected_bg_color;
+    box-shadow: inset 0 2px 3px -1px transparentize(black,0.7);
+  }
+  &:selected {
+    @extend .list-row:selected;
+    &:active { box-shadow: inset 0 2px 3px -1px transparentize(black,0.5); }
+    &:hover { background-color: mix($selected_fg_color,$selected_bg_color,10%);}
+  }
+  &:backdrop:hover {
+    @extend %undecorated_button;
+  }
+}
+
+.list-row:selected {
+  //FIXME %selected_items needs to be a mixin
+  color: $selected_fg_color;
+  background-color: $selected_bg_color;
+  &:backdrop {
+    color: $backdrop_base_color;
+  }
 }
 
-.list-row.button:selected,
+/*.list-row.button:selected,
 .list-row:selected {
   background-color: $selected_bg_color;
   color: $selected_fg_color;
   &:backdrop { color: $backdrop_base_color;}
-}
+}*/
 
 /*********************
  * App Notifications *
index 99cbc2697b75b1adc203b5338e709709419e5197..feaaf2c256e066743e19b9d76d17b422af8cb4a2 100644 (file)
     border-radius: 3px;
     border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
+.button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -2436,26 +2436,37 @@ GtkScrolledWindow GtkViewport.frame {
     background-color: #2c2c2c;
     border-color: #1e2222; }
 
-.list-row.button,
 .list-row,
 .grid-child {
-  background-image: none;
-  border-style: none;
-  box-shadow: none;
-  border-width: 0;
   padding: 2px; }
 
-.list-row.button:hover {
-  background-color: #101010; }
+.list-row.button {
+  background-color: rgba(41, 41, 41, 0);
+  border-style: none;
+  border-radius: 0;
+  box-shadow: none; }
+  .list-row.button:hover {
+    background-color: #323232; }
+  .list-row.button:active {
+    color: #215d9c;
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+  .button.list-row:active:selected {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
+  .button.list-row:hover:selected {
+    background-color: #376da5; }
 
-.list-row.button:selected,
-.list-row:selected {
-  background-color: #215d9c;
-  color: white; }
-  .list-row.button:selected:backdrop,
+.list-row:selected, .list-row.button:selected {
+  color: white;
+  background-color: #215d9c; }
   .list-row:selected:backdrop {
     color: #2c2c2c; }
 
+/*.list-row.button:selected,
+.list-row:selected {
+  background-color: $selected_bg_color;
+  color: $selected_fg_color;
+  &:backdrop { color: $backdrop_base_color;}
+}*/
 /*********************
  * App Notifications *
  *********************/
index 68fcecf998dd636ca758c7734803a41cee0ac51d..8644774d56d6205ef3cf442031bda827d023005e 100644 (file)
     border-radius: 3px;
     border-style: solid; }
 
-.button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
+.button.flat, .button.flat:backdrop, .menuitem.button.flat, .menuitem.button.flat:backdrop, .menuitem.button.flat:backdrop:hover, .button:link, .button:visited, .button:link:hover, .button:link:active, .button:visited:hover, .button:visited:active, .button:link:backdrop, .button:visited:backdrop, .notebook tab .button, .list-row.button, .list-row.button:backdrop:hover, GtkCalendar.button, GtkCalendar.button:hover, GtkCalendar.button:backdrop, GtkCalendar.button:backdrop:hover, .scale-popup .button:hover, .scale-popup .button:backdrop, .scale-popup .button:backdrop:hover, .scale-popup .button:backdrop:insensitive {
   border-color: transparent;
   background-color: transparent;
   background-image: none;
@@ -2428,26 +2428,37 @@ GtkScrolledWindow GtkViewport.frame {
     background-color: #fcfcfc;
     border-color: #a8a8a8; }
 
-.list-row.button,
 .list-row,
 .grid-child {
-  background-image: none;
-  border-style: none;
-  box-shadow: none;
-  border-width: 0;
   padding: 2px; }
 
-.list-row.button:hover {
-  background-color: #e6e6e6; }
+.list-row.button {
+  background-color: rgba(255, 255, 255, 0);
+  border-style: none;
+  border-radius: 0;
+  box-shadow: none; }
+  .list-row.button:hover {
+    background-color: #f4f4f4; }
+  .list-row.button:active {
+    color: #4a90d9;
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.3); }
+  .button.list-row:active:selected {
+    box-shadow: inset 0 2px 3px -1px rgba(0, 0, 0, 0.5); }
+  .button.list-row:hover:selected {
+    background-color: #5c9bdc; }
 
-.list-row.button:selected,
-.list-row:selected {
-  background-color: #4a90d9;
-  color: white; }
-  .list-row.button:selected:backdrop,
+.list-row:selected, .list-row.button:selected {
+  color: white;
+  background-color: #4a90d9; }
   .list-row:selected:backdrop {
     color: #fcfcfc; }
 
+/*.list-row.button:selected,
+.list-row:selected {
+  background-color: $selected_bg_color;
+  color: $selected_fg_color;
+  &:backdrop { color: $backdrop_base_color;}
+}*/
 /*********************
  * App Notifications *
  *********************/